<template>
  <div class="sub-filter" v-if="list.length">
    <div class="item" v-for="item in list" :key="item.id">
      <div class="head">{{ item.name }}：</div>
      <div class="body">
        <a href="javascript:;">全部</a>
        <a href="javascript:;" v-for="p in item.properties" :key="p.id">
          {{ p.name }}
        </a>
      </div>
    </div>
  </div>
  <div v-else class="sub-filter">
    <XtxSkeleton class="item" width="800px" height="40px" />
    <XtxSkeleton class="item" width="800px" height="40px" />
    <XtxSkeleton class="item" width="600px" height="40px" />
    <XtxSkeleton class="item" width="600px" height="40px" />
    <XtxSkeleton class="item" width="600px" height="40px" />
  </div>
</template>

<script>
import { findSubCategoryFilter } from '@/api/category'
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
export default {
  name: 'SubFilter',
  setup (props, { emit }) {
    const route = useRoute()

    const list = ref([])

    const getFilter = async (id) => {
      const { result } = await findSubCategoryFilter(id)
      // console.log(result)
      // result.brands            品牌数据
      // result.saleProperties    筛选条件
      // 把品牌和筛选条件放到了同一个数组内
      list.value = [
        // 品牌数据
        { id: null, name: '品牌', properties: result.brands },
        // 筛选条件
        ...result.saleProperties
      ]
      //   console.log(list.value)
    }

    watch(
      () => route.params.id,
      (id) => {
        // console.log('id发生变化了', id)
        if (route.path === `/category/sub/${id}`) {
          getFilter(id)
        }
      },
      { immediate: true }
    )
    // 获取筛选参数
    const getFilterParams = () => {
      const filterParams = {}
      const attrs = []
      filterParams.brandId = list.value.selectedBrand
      list.value.saleProperties.forEach((p) => {
        const attr = p.properties.find((attr) => attr.id === p.selectedProp)
        if (attr && attr.id !== undefined) {
          attrs.push({ groupName: p.name, propertyName: attr.name })
        }
      })
      if (attrs.length) filterParams.attrs = attrs
      return filterParams
    }

    // 选择品牌
    const changeBrand = (brandId) => {
      if (list.value.selectedBrand === brandId) return
      list.value.selectedBrand = brandId
      emit('filter-change', getFilterParams())
    }
    // 选中属性
    const changeAttr = (p, attrId) => {
      if (p.selectedProp === attrId) return
      p.selectedProp = attrId
      emit('filter-change', getFilterParams())
    }
    return { list, changeBrand, changeAttr }
  }
}
</script>

<style scoped lang="less">
.xtx-skeleton {
  padding: 10px 0;
}
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        display: inline-block;
        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
</style>
